<template>
  <div class="background">
      <el-button type="text" class="loginBtn" @click="$router.push({path: '/login'})">登录</el-button>
      <el-button type="text" class="signInBtn" @click="$router.push({path: '/apply'})">注册</el-button>
      <el-button type="primary" class="btn" @click="goAsk">→直接体验AI查询</el-button>
  </div>
</template>

<script>
import {userLogin, userLogout} from '../../api/user'
import store from '../../store'

export default {
  name: 'homePage',
  data () {
    return {
      user: {
        userName: '',
        userPassword: ''
      }
    }
  },
  methods: {
    goAsk () {
      this.user.userName = '游客'
      this.user.userPassword = '123456'
      userLogout().then(res => {
        // 清除前端的用户
        store.dispatch('user/clearUserInfo')
        userLogin(this.user).then(res => {
          if (res.status && res.data !== null) {
            this.$router.push({path: '/main/first'})
          }
        })
      })
    }
  }
}
</script>

<style scoped>
.background{
    background-image: url("../../assets/images/img.png");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}
.loginBtn{
    position: fixed;
    top: 4%;
    right:20%;
    font-size: 30px;
    color: #FFFFFF;
}
.signInBtn{
    position: fixed;
    top: 4%;
    right:10%;
    font-size: 30px;
    color: #FFFFFF;
}
.btn{
    position: fixed;
    bottom: 7%;
    left:7%;
    font-size: 20px;
    background-color: #4E7FEE;
    padding: 20px 30px;
}
</style>
